<template>
  <div class="app-container">
    <div class="search-container">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="名称" prop="fullName">
          <el-input
            v-model="queryParams.name"
            placeholder="桥梁名称"
            @keyup.enter="reload"
          />
        </el-form-item>
        <el-form-item>
          <el-button class="filter-item" type="primary" @click="reload">
            <i-ep-search />
            搜索
          </el-button>
          <el-button @click="resetQuery"> <i-ep-refresh />重置 </el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-card shadow="never" class="table-container">
      <template #header>
        <el-button
          v-hasPerm="['report:bridge:add']"
          type="success"
          @click="handleAdd"
          ><i-ep-plus />新增</el-button
        >
        <el-button
          v-hasPerm="['report:bridge:del']"
          type="danger"
          :disabled="batchDelete"
          @click="batchHandleDelete"
          ><i-ep-delete />删除
        </el-button>
      </template>

      <el-table :data="tableData" @selection-change="handleSelectChange">
        <el-table-column type="selection" width="55" />
        <el-table-column label="桥梁名称" prop="name" />
        <el-table-column label="管理（养）单位" prop="deptId" />
        <el-table-column label="线路编码" prop="lineCode" />
        <el-table-column label="路段编码" prop="sectionId" />
        <el-table-column label="区域编码" prop="areaId" />
        <el-table-column label="技术等级" prop="technicalGrade" />
        <el-table-column label="操作" fixed="right" width="180">
          <template #default="scope">
            <el-button
              @click="handleEdit(scope.row)"
              v-hasPerm="['report:bridge:edit']"
              type="primary"
              link
              size="small"
              >编辑</el-button
            >
            <el-button
              @click="handleStructureEdit(scope.row)"
              type="success"
              link
              size="small"
              >结构</el-button
            >
            <el-button
              @click="handleDelete(scope.row)"
              v-hasPerm="['report:bridge:del']"
              type="danger"
              link
              size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <BridgeModal v-model="bridgeSelected" />
    <BridgeStructureModal v-model="bridgeStructureSelected" />
  </div>
</template>

<script lang="ts" setup>
import {
  batchDeleteBridge,
  deleteBridge,
  getBridgeList,
  exportWord,
} from "@/api/report/bridge.api";
import BridgeModal from "./components/BridgeModal.vue";
import BridgeStructureModal from "./components/BridgeStructureModal.vue";
import { ElMessage } from "element-plus";
import { ref, computed, onMounted } from "vue";

// 批量删除

// 弹窗
const bridgeSelected = ref({
  visible: false,
  id: undefined,
  title: "新增桥梁",
});

// 结构信息弹窗
const bridgeStructureSelected = ref({
  visible: false,
  id: undefined,
  title: "",
});

// 批量删除

// 查询参数
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  name: "",
});

// 选中的行
const selectedRowKeys = ref([]);
// 表格数据
const tableData = ref([]);

/**
 * 批量删除按钮是否禁用
 */
const batchDelete = computed(() => {
  return selectedRowKeys.value.length === 0;
});

onMounted(() => {
  reload();
});

const handleSelectChange = (keys) => {
  // 要复制新的数组，否则computed方法不触发
  selectedRowKeys.value = [...keys];
};

/**
 * 新增事件
 */
function handleAdd() {
  bridgeSelected.value.visible = true;
  bridgeSelected.value.id = undefined;
  bridgeSelected.value.title = "新增桥梁";
}

/**
 * 编辑事件
 */
function handleEdit(record) {
  bridgeSelected.value = {
    visible: true,
    id: record.id,
    title: "编辑桥梁",
  };
}

/**
 * 结构编辑事件
 */
function handleStructureEdit(record) {
  bridgeStructureSelected.value = {
    visible: true,
    id: record.id,
    title: "编辑桥梁结构",
  };
}

/**
 * 查询事件
 */
const reload = () => {
  getBridgeList(queryParams.value).then((res) => {
    tableData.value = res.data.records;
  });
};

/**
 * 重置查询
 */
const resetQuery = () => {
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
    name: "",
  };
  reload();
};

/**
 * 删除事件
 */
async function handleDelete(record) {
  await deleteBridge({ id: record.id }, reload);
}

/**
 * 批量删除事件
 */
async function batchHandleDelete() {
  await batchDeleteBridge({ ids: selectedRowKeys.value }, reload);
}

async function handleExport(record) {
  let data = await exportWord({ id: record.id });
  if (!data) {
    ElMessage.warning("文件下载失败");
    return;
  }
  const blobURL = window.URL.createObjectURL(data.data);
  const tempLink = document.createElement("a");
  tempLink.style.display = "none";
  tempLink.href = blobURL;
  tempLink.setAttribute("download", "监测报告.docx");
  if (typeof tempLink.download === "undefined") {
    tempLink.setAttribute("target", "_blank");
  }
  document.body.appendChild(tempLink);
  tempLink.click();
  document.body.removeChild(tempLink);
  window.URL.revokeObjectURL(blobURL);
}
</script>

<style lang="scss" scoped></style>
